<!DOCTYPE html>
<html lang="en">
<head>
    {%- block head %}
        <title>
            {% block title %}
            {% endblock title %}
        </title>
        {%- block metas %}
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
        {%- endblock metas %}

        {%- block styles %}
            <!-- Font Awesome -->
            <link rel="stylesheet" type="text/css"
                  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
            <!-- Bootstrap -->
            <link rel="stylesheet" type="text/css"
                  href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
            <!-- MDB -->
            <link rel="stylesheet" type="text/css"
                  href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        {%- endblock styles %}

    {%- endblock head %}
</head>

<body class="{% block body_attribs %}{% endblock body_attribs %}">
{% block body %}
    {% block header %}
        {% block sidebar %}
        {% endblock sidebar %}

        {% block navbar %}
        {% endblock navbar %}
    {% endblock header %}

    {% block content %}
    {% endblock content %}

    {% block footer %}
    {% endblock footer %}
{% endblock body %}

{% block scripts %}
{% endblock scripts %}

</body>
</html>
